<template>
  <div class="comment_form_div">
    <a-avatar :src="comment.userAvatar" v-if="comment.userId"/>
    <div class="comment_main" v-if="comment.userId">
      <a-textarea class="comment_content" v-model:value="comment.content"
                  :placeholder="comment.atUserId?`回复 @${comment.atUserName} ...`:'输入评论...'"/>
      <div class="comment_actions">
        <div></div>
        <a-space>
          <a-button type="primary" size="small" :disabled="comment.content.length===0" @click="addComment">发表</a-button>
        </a-space>
      </div>
    </div>
    <span v-else>请<router-link to="/login">登录</router-link>后进行评论</span>
  </div>
</template>

<script>
import { computed, defineComponent, getCurrentInstance, reactive, toRefs } from 'vue'
import { useStore } from 'vuex'
import { AddComment } from '@/service/blog'

export default defineComponent({
  props: {
    blogId: String,
    parent: {
      type: Object,
      default () {
        return {
          id: '',
          userId: '',
          userName: '',
          parentId: ''
        }
      }
    }
  },
  emits: ['addComment'],
  setup (props, context) {
    const { proxy } = getCurrentInstance()
    const store = useStore()

    const state = reactive({
      comment: {
        id: '',
        blogId: computed(() => props.blogId),
        userId: computed(() => store.state.user.id),
        userName: computed(() => store.state.user.name),
        userDomain: computed(() => store.state.user.domain),
        userAvatar: computed(() => store.state.user.avatar),
        content: '',
        parentId: computed(() => props.parent.parentId ? props.parent.parentId : props.parent.id),
        atUserId: computed(() => props.parent.userId),
        atUserName: computed(() => props.parent.userName),
        atUserDomain: computed(() => props.parent.userDomain),
        likes: 0,
        createdTime: ''
      }
    })

    const methods = reactive({
      addComment: async () => {
        state.comment.id = await AddComment(state.comment)
        proxy.$message.success('发表评论成功！')
        const date = new Date()
        const year = date.getFullYear()
        const month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
        const day = date.getDate() + 1 < 10 ? '0' + date.getDate() : date.getDate()
        const hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
        const minute = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
        const second = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
        state.comment.createdTime = `${year}-${month}-${day} ${hour}:${minute}:${second}`
        context.emit('addComment', state.comment)
      }
    })

    return {
      ...toRefs(state),
      ...toRefs(methods)
    }
  }
})
</script>

<style lang="less" scoped>
.comment_form_div {
  width: 100%;
  margin: 5px 0;
  padding: 10px;
  background-color: #00000005;
  display: flex;
  justify-content: space-around;

  .comment_main {
    width: 95%;
    display: flex;
    flex-direction: column;

    .comment_actions {
      margin-top: 5px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
</style>
